<template>
    <div>
        <!-- visible.sync  v-model  自定义组件上能够使用v-model -->
        <el-dialog :title="form.id ? '规格编辑' : '规格添加'" :visible.sync="buffer.formBuffer">
            <el-form :model="form">
                {{ form }}
                {{ attrs }}
                <!-- 规格名称 -->
                <el-form-item label="规格名称" :label-width="formLabelWidth">
                    <el-input v-model="form.specsname" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 规格值 -->
                <el-form-item :label-width="formLabelWidth" v-for="(item, index) in attrs" label="规格值" :key="index">
                    <div class="row">
                        <el-input v-model="item.value"></el-input>
                        <el-button @click="addSpecs" v-if="index == 0">新增规格值</el-button>
                        <el-button @click="removeSpecs(index)" v-else>删除</el-button>
                    </div>
                </el-form-item>
                <!-- 规格状态 -->
                <el-form-item label="规格状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="buffer.formBuffer = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['buffer', 'roleList'],
    data() {
        return {
            form: {
                specsname: "",  //商品属性名称
                attrs: '',//商品属性值字符串 '白色，黑色，红色'
                status: 1//1 启用  2禁用
            },
            attrs: [{ value: "" }],
            formLabelWidth: '120px'
        };
    },
    watch: {
        buffer: {
            handler(newV, oldV) {
                if (newV.formBuffer == false) {
                    this.form = {
                        specsname: "",  //商品属性名称
                        attrs: '',//商品属性值字符串
                        status: 1//1 启用  2禁用
                    }
                    this.attrs = [{ value: "" }]
                }
            },
            deep: true,//使用深度监听
        }
    },
    mounted() {
        // 监听list组件传值 进行修改数据回填
        this.$BUS.$on('edit', (info) => {
            // 解构获取修改数据
            let { row } = info
            console.log(row)
            // 赋值回填数据
            this.form = JSON.parse(JSON.stringify(row))
            // ['白色','黑色'] ===> [{value:'白色'},{value:"黑色"}....]
            // 如果箭头函数后面直接返回一个对象，这个对象使用“（）”嵌套包裹
            this.attrs = this.form.attrs.map(item => ({ value: item }))
            // 弹起表单
            this.buffer.formBuffer = true
        })
    },
    methods: {
        // 添加规格值
        addSpecs() {
            this.attrs.push({ value: "" })
        },
        // 删除规格值
        removeSpecs(index) {
            this.attrs.splice(index, 1)
        },
        submit() {
            // 获取规格值
            this.form.attrs = this.attrs.map(item => item.value).join(',');
            // let a = 12;注意次三元上方语句结尾一定加 ';'
            (this.form.id ? this.$api.reqEditspecs(this.form) : this.$api.reqAddspecs(this.form))
                .then(res => {
                    console.log(res)
                    // 3.1关闭弹窗
                    this.buffer.formBuffer = false
                    // 3.2提示用户操作成功
                    this.$message({ type: "success", message: "操作成功！" })
                    // 3.3赋空表单数据(使用了watch)
                    // 3.4更新数据列表
                    this.$emit('channel', '更新数据吧！')
                })
                .catch(err => console.log(err))
        }
    },
};
</script>

<style scoped>
.row {
    display: flex;
}
</style>
